<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['send'])

const inputText = ref('')
const inputRef = ref(null)

const canSend = computed(() => inputText.value.trim().length > 0 && !props.isLoading)

function send() {
  if (!canSend.value) return
  const text = inputText.value.trim()
  inputText.value = ''
  emit('send', text)
}

// 暴露聚焦方法
defineExpose({
  focus: () => inputRef.value?.focus()
})
</script>

<template>
  <footer class="composer">
    <div class="input-wrap">
      <input
        ref="inputRef"
        class="input"
        v-model="inputText"
        type="text"
        placeholder="输入你的问题..."
        @keydown.enter.exact.prevent="send"
      />
      <div class="hint">按 Enter 发送</div>
    </div>
    <button class="send-btn" :disabled="!canSend" @click="send">
      <span class="send-text">{{ isLoading ? '处理中...' : '发送' }}</span>
      <svg v-if="!isLoading" class="send-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
        <path fill="currentColor" d="M2 21l21-9L2 3v7l15 2-15 2z"/>
      </svg>
      <div v-else class="send-loading">
        <div class="loading-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </button>
  </footer>
</template>

<style scoped>
.composer {
  position: sticky;
  bottom: 0;
  padding: 12px 32px;
  background: #ffffff;
  border-top: 1px solid #eef0f5;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.input-wrap {
  position: relative;
  flex: 1;
  max-width: 800px;
}

.input {
  width: 100%;
  height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0 14px;
  outline: none;
  font-size: 15px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hint {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 12px;
  color: #9ca3af;
}

.send-btn {
  height: 48px;
  min-width: 100px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.06s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.send-btn:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.send-btn:not(:disabled):active {
  transform: translateY(1px);
}

.send-icon {
  opacity: 0.9;
}

/* 发送按钮加载动画 */
.send-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-loading .loading-dots {
  display: flex;
  gap: 4px;
}

.send-loading .loading-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #ffffff;
  animation: loading-bounce 1.4s ease-in-out infinite both;
}

.send-loading .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.send-loading .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.send-loading .loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes loading-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
</style>

